<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>BFC---EMMET</title>
    <style>
        .box {
            width: 400px;
            background-color: #f00;
            margin: 50px auto;
            display: inline-block;
        }
        
        .box1 {
            width: 100px;
            height: 100px;
            background-color: #0f0;
            float: left;
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: #00f;
            float: left;
            height: 100px;
            background-color: #fff;
            background-image: url();
        }
    </style>
</head>

<body>
    <input type="radio">

    <p>0001</p>
    <p>0002</p>
    <p>0003</p>
    <p>0004</p>
    <p>0005</p>


    <!-- 
		 bfc  (block formatting  context)  块级格式化上下文,指一个独立的容器
			形成BFC
				① 浮动的元素
				② 定位元素  absolute  fixed
				③ display  inline-block
				④ overflow  除了 visible以外的值 ( hidden   auto  scroll)
			BFC特性
				① 内部的box会垂直方向上一个接一个排列
				② 垂直方向上的距离 由 margin决定
				③ bfc的区域 不会与浮动元素重叠
				④ 计算BFC高度的时候, 浮动元素也会参与计算
		emmet  快速生成 htmlcss 代码
		 
		 -->
</body>

</html>